<template>
    <div class="common-layout">
        <el-row>
            <el-button type="success">ShowType : {{ state.showType }}</el-button>
            <el-button @click="changeType('weekPct')">weekPct</el-button>
            <el-button @click="changeType('pctSum')">pctSum</el-button>
            <el-button @click="changeType('incNum')">incNum</el-button>
        </el-row>
        <el-row>
            <el-table :data="state.tableData" 
            :cell-class-name="tableColumnClassName"
            @sort-change="sortChange"
            @cell-click="cellClick"
            :default-sort="state.sort"
            @header-click="tableHeaderClick"
            style="width: 100%" height="800">
                <el-table-column prop="date" fixed label="Date" width="200" sortable/>
                <el-table-column v-for="stock in state.stocks" width="100" :key="stock" :label="stock">
                    <template #default="scope">
                        <div v-if="scope.row[stock]">
                            <el-text v-if="state.showType == 'weekPct'">{{ scope.row[stock].weekPct }} </el-text>
                            <el-text v-if="state.showType == 'pctSum'">{{ numberFormat(scope.row[stock].pctSum, 2) }}</el-text>
                            <el-text v-if="state.showType == 'incNum'">{{ scope.row[stock].incNum }}</el-text>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    <el-drawer v-model="drawer"  :with-header="false" size="900px">
        <el-table :data="getFormatData(selectDate)" 
            @cell-click="drawerCellClick"
        >
            <el-table-column prop="date" label="Date" width="240"/>
            <el-table-column prop="stock" label="stock" width="140"/>
            <el-table-column prop="weekPct" label="pct" width="100" sortable/>
            <el-table-column prop="pctSum" label="pctSum" width="100" sortable>
                <template #default="scope">
                    <el-text>{{ numberFormat(scope.row.pctSum, 2) }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="incNum" label="incNum" width="100" sortable/>
            <el-table-column prop="disPct" label="60w" width="100" sortable/>
        </el-table>
    </el-drawer>
    </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
import { getMultiWeekData } from '../service/week';
import { openNewTableDisplay, openNewTableWeekDetail } from '../router'
import { numberFormat } from '../utils/help';
import { useRouteQuery } from '../utils/useRoute';

const base = "MultiWeekPctDetail"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const prop = defineProps({
    stocks: String
})

const drawer = ref(false)
const selectDate = ref("")

const state = reactive({
    showType: 'weekPct',
    data: [],
    raw_data: null,
    tableData: [],
    tableDataMap: new Map(),
    stocks: [],
    list_data : [],
    options: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    },
})

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

let count = useRouteQuery('count', 200)

const loadData = () => {
    getMultiWeekData(prop.stocks, count).then(res => {
        state.raw_data = res.data
        state.stocks = Object.keys(state.raw_data)

        // 最大记录数
        let maxRecord = 0
        let maxStock = ''
        state.stocks.forEach(stock => {
            if (maxRecord < state.raw_data[stock].length) {
                maxRecord = state.raw_data[stock].length
                maxStock = stock
            }
        })

        // 设置初始值
        state.raw_data[maxStock].forEach(item => {
            let tmp = {} 
            tmp['date'] = item.date 
            state.stocks.forEach(stock => {
                tmp[stock] = null
            })
            state.tableDataMap.set(item.date,  tmp)
        })

        state.stocks.forEach(stock => {
            state.raw_data[stock].forEach(item => {
                state.tableDataMap.get(item.date)[stock] = item
            })
        })
        state.tableData = Array.from(state.tableDataMap.values())
    })
}

loadData()

const changeType = (type) => {
    state.showType = type
}

const tableColumnClassName = ({row, column, rowIndex, columnIndex}) => {

    let cell = column.label
    let item = row[cell]
    if (item && item[state.showType] < 0) {
        return 'lt0-cell'
    }
}

const tableHeaderClick = (column, event) => {
    let stock = column.label
    openNewTableWeekDetail(stock)
}

const cellClick = (row, column, cell, event) => { 
    let label = column.label
    if (label == "Date") {
        drawer.value = true;
        selectDate.value = row.date
    } else {
        openNewTableDisplay(label, row.date)
    }
}
const getFormatData = (date) => {
    let data = state.tableDataMap.get(date)

    let ret = []
    for (let key in data) {
        if (key != "date" && data[key]) {
            ret.push(data[key])
        }
    }
    return ret
}

const drawerCellClick = (row, column, cell, event) => {
    let prop = column.property
    if (prop == 'stock') {
        openNewTableDisplay(row.stock, row.date)
    }
}
</script>

<style scope>
</style>